<template>
  <div class="latestsongs">
		<div class="main-header">
			<div class="main-header-item">
				<div :class="{'botton-lerf':true,'bottomclick':bottomtype}" @click="bottomclick(1)">新歌速递</div>
				<div :class="{'botton-right':true,'bottomclick':!bottomtype}" @click="bottomclick(2)">新碟上架</div>
			</div>
		</div>
		<div class="main-content-top">
			<div>
				<span :class="{'bottomspan':spanindex === index}" v-for="(item,index) in screenlist" :key="index" @click="spanbottomclick(item,index)">{{item.data}}</span>
			</div>
			<div class="content-right">
				<span>播放全部</span>
			</div>
		</div>
		<div class="main-content">
			<div class="main-content-table" v-show="bottomtype">
				<table border="0" cellpadding="0" cellspacing="0">
					<tr v-for="(item,index) in tablelist" :key="index" @click="clicktr(item)">
						<td>{{index + 1}}</td>
						<td><div class="tddiv"><img :src="item.album.picUrl" /> <div class="imgdiv"><i style="color: red;font-size: 15px;" class="iconfont icon-play-01"></i> </div> </div>  </td>
						<td>{{item.name}}</td>
						<td><span class="tdspan" style="margin: 0 5px;" v-for="(items,indexs) in item.artists" :key="indexs">{{items.name}}</span></td>
						<td><span class="tdspan">{{item.album.company}}</span></td>
						<td>{{item.duration | somgtime}}</td>
					</tr>
				</table>
			</div>
			<div v-show="!bottomtype">
				新碟上架
			</div>
		</div>
  </div>
</template>
<script>
export default{
  data () {
    return {
		bottomtype:true,
		spanindex:0,
		screenlist:[
			{id: 0,data: '全部'},
			{id: 7,data: '华语'},
			{id: 96,data: '欧美'},
			{id: 8,data: '日本'},
			{id: 16,data: '韩国'}],
			tablelist:[]
    }
  },
  components: {

  },
  methods: {
	  clicktr(data){     //点击当前歌曲
		 	let id = data.id;
		 	console.log(id)
		 	this.$api.song_url({
		 		id: id
		 	}).then(res => {
				console.log(res)
				console.log(data)
					let gss = '';
				for(let i = 0; i < data.artists.length; i++){
					if(i === 0){
						gss += data.artists[i].name;
					}else{
						gss += '-' +data.artists[i].name;
					}
				}
				let obj = {
					img:data.album.blurPicUrl,
					name:data.name,
					gs:gss,
					zsc:data.duration,
					url:res.data[0].url
				}
				
		 		this.$store.commit('SongSET',obj);
		 	}) 
	  },
	bottomclick(index){
		if(index === 1){
			this.bottomtype = true;
		}else{
			this.bottomtype = false;
		}
	},
	spanbottomclick(data,index){
		this.spanindex = index;
		let obj = {
			type:data.id
		}
		this.$api.topsong(obj).then(res=>{
			console.log(res)
			this.tablelist = res.data;
		})
	},
	all(){
		this.spanbottomclick({id: 0,data: '全部'});
	}
  },
  mounted() {
  	this.all();
  },
  filters:{
		somgtime(e) {
			const dt = new Date(e)
			const mm = (dt.getMinutes() + '').padStart(2, '0')
			const ss = (dt.getSeconds() + '').padStart(2, '0')
			return mm + ':' + ss;
		}
  }
}
</script>

<style scoped="scoped">
	.latestsongs{
		width: 100%;
	}
	.main-header{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.main-header-item{
		display: flex;
		justify-content: space-between;
		width: 240px;
		border: 1px solid;
		border-radius: 20px;
	}
	.main-header-item div{
		cursor: pointer;
	}
	.main-header-item div:hover{
		background-color: #D9D9D9;
	}
	.botton-lerf{
		width: 120px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 20px;
		
	}
	.botton-right{
		width: 120px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 20px;
	}
	.bottomclick{
		background-color: #909399!important;
		color: #FFFFFF;
	}
	.main-content-top{
		padding: 20px 0;
		display: flex;
		justify-content: space-between;
	}
	.bottomspan{
		color: #000000;
		font-weight: bold;
	}
	.main-content-top div span{
		margin: 18px;
		cursor: pointer;
	}
	.content-right{
		cursor: pointer;
		padding: 4px 10px;
		border-radius: 20px;
		background-color: red;
		font-size: 12px;
		color: #FFFFFF;
	}
	.content-right:hover{
		background-color: crimson;
	}
	.main-content-table{
		width: 100%;
	}
	.main-content-table table{
		width: 100%;
	}
	.main-content-table table tr{
		cursor: pointer;
		
	}
	.main-content-table table tr:hover{
		background-color: #D9D9D9;
	}
	.main-content-table table tr td{
		text-align: center;
		
	}
	.main-content-table table tr td:nth-child(1){
		width: 60px;
		height: 60px;
	}
	.main-content-table table tr td:nth-child(2){
		width: 60px;
		height: 60px;
	}
	.main-content-table table tr td:nth-child(3){
		width: 400px;
		height: 60px;
	}
	.main-content-table table tr td:nth-child(4){
		width: 200px;
		height: 60px;
	}
	.main-content-table table tr td:nth-child(5){
		width: 200px;
		height: 60px;
	}
	.main-content-table table tr td img{
		width: 60px;
		height: 60px;
		border-radius: 5px;
	}
	.tdspan:hover{
		color: #999999;
	}
	.imgdiv{
		
		position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 28px;height: 28px;border-radius: 50%;
		text-align: center;
		line-height: 28px;
		padding-left: 4px;
		background-color: #FFFFFF;
		opacity: 0.8;
		display: none;
	}
	.tddiv{
		width: 100%;height: 100%;position: relative;
	}
	.tddiv:hover .imgdiv{
		display: block;
	}
</style>
